<style scoped lang="scss" type="text/scss">
  @import '~variables';
</style>

<template>
  <div>
    <v-header></v-header>
    <div class="main-style">
      <div class="padding-l">
        <!--<div v-for="item in bookList" :key="item">-->
        <!--<img :src="item.src" alt="">-->
        <!--<Button type="text" size="small" @click="detail(item.id)">详情</Button>-->
        <!--<Button type="text" size="small" @click="del(item.id)">删除</Button>-->
        <!--</div>-->
        <Table :columns="column" :data="bookList" stripe></Table>
        <Page :current="bookPage.current" :total="bookPage.total" show-total @on-change="changePage" class="margin-top float-right"></Page>
      </div>
    </div>
    <v-footer></v-footer>
  </div>
</template>

<script>
  export default {
    name: 'bookshelves',
    data () {
      return {
        column: [
          { title: '书名',
            key: 'title',
            width: 150,
            align: 'center',
            render: (h,params) =>{
              return h('div',[
                h('Button',{ props: {
                  type: 'text',
                  size: 'small'
                },
                  on: {
                    click: () => {
                      this.detail(params.row)
                    }
                  }
                },params.row.title)
              ])
            } },
          { title: '作者',key: 'author' },
          { title: '操作',
            key: 'operate',
            render: (h,params) =>{
              return h('div',[
                h('Button',{ props: {
                  type: 'text',
                  size: 'small'
                },
                  on: {
                    click: () => {
                      this.del(params.row.id)
                    }
                  }
                },'删除')
              ])
            } }

        ],
        bookList: [],
        bookPage: {
          current: 1,
          size: 10,
          total: 10
        }
      }
    },
    mounted () {
      this.fetchData()
    },
    methods: {
      fetchData () {
        this.$http.get('/api/book/getMarkedBooks',{
          pageNum: this.bookPage.current,
          pageSize: this.bookPage.size
        })
          .then((res) => {
            if (res) {
              this.bookList = res.result.list
              this.bookPage.total = res.result.total
              console.log(this.bookList)
            }
          })
      },
      changePage (val) {
        this.bookPage.current = val
      },
      detail (val) {
        this.$router.push(`/jwx/list/${val.id}`)
      },
      del (id) {
        this.$http.post('/api/book/markBook',{
          bid: id,
          isAdd: false
        })
          .then((res) => {
            if (res) {
              this.$Message.success('删除成功')
              this.fetchData()
            }
          })
      }
    }
  }
</script>
